<template>
  <!-- <div>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <div class="display-flex">
        <div class="flex-1 padding-20">
          <a-form-model-item label="窗口名称" prop="winName">
            <a-input :maxLength="15" v-model.trim="form.winName"></a-input>
          </a-form-model-item>
          <a-form-model-item label="时钟风格" prop="dateStyle">
            <a-select v-model="form.dateStyle" @change="setDateStyle">
              <a-select-option value="0">2000-01-01 00:00:00</a-select-option>
              <a-select-option value="1">2000/01/01 00:00:00</a-select-option>
              <a-select-option value="2"
                >2000年01月01日 00时00分00秒</a-select-option
              >
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="显示内容">
            <a-row>
              <a-col :span="8">
                <a-checkbox @change="setShowYear" v-model="form.showYear">年</a-checkbox>
              </a-col>
              <a-col :span="8">
                <a-checkbox @change="setShowMonth" v-model="form.showMonth">月</a-checkbox>
              </a-col>
              <a-col :span="8">
                <a-checkbox @change="setShowDay" v-model="form.showDay">日</a-checkbox>
              </a-col>
              <a-col :span="8">
                <a-checkbox @change="setShowWeek" v-model="form.showWeek">星期</a-checkbox>
              </a-col>
              <a-col :span="8">
                <a-checkbox @change="setShowHour" v-model="form.showHour">时</a-checkbox>
              </a-col>
              <a-col :span="8">
                <a-checkbox @change="setShowMinute" v-model="form.showMinute">分</a-checkbox>
              </a-col>
              <a-col :span="8">
                <a-checkbox @change="setShowSecond" v-model="form.showSecond">秒</a-checkbox>
              </a-col>
            </a-row>
          </a-form-model-item>
          <a-form-model-item label="年份位数" prop="yearStyle">
            <a-radio-group v-model="form.yearStyle" @change="setYearStyle">
              <a-radio value="0">4位年</a-radio>
              <a-radio value="1">2位年</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="行格式" prop="isMoreLine">
            <a-radio-group v-model="form.isMoreLine" @change="setIsMoreLine">
              <a-radio :value="0">单行</a-radio>
              <a-radio :value="1">多行</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </div>
        <div class="flex-1 padding-20">
          <span class="fonm_title">字体设置</span>
          <a-form-model-item label="字体" prop="fontName">

            <a-select v-model="form.fontName" @change="setFont">
              <a-select-option
                v-for="(item, index) in fontNameList"
                :key="index"
                :value="item"
                >{{ item }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="字号" prop="fontSize">
            <a-select v-model="form.fontSize" @change="setFontSize">
              <a-select-option
                v-for="(item, index) in fontSizeList"
                :key="index"
                :value="item"
                >{{ item }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="颜色" prop="fontColor">
            <a-radio-group v-model="form.fontColor" @change="setFontColor">
              <a-radio value="#ff0000">红色</a-radio>
              <a-radio value="#000000">黑色</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="样式">
            <a-checkbox v-model="form.isBold" @change="setFontWeight">加粗</a-checkbox>
            <a-checkbox v-model="form.isItalic" @change="setItalic">斜体</a-checkbox>
            <a-checkbox v-model="form.isUnderline" @change="setTextDecoration">下划线</a-checkbox>
          </a-form-model-item>
          <a-form-model-item label="行距" prop="lineSpace">
            <a-input-number
              v-debounce="[setLineSpace,'input',1000]"
              :parser="(value) => (/^\d+$/.test(value) ? value : '')"
              v-model="form.lineSpace"
            />
          </a-form-model-item>
        </div>
        <div class="flex-1 padding-20">
          <span class="fonm_title">动作设置</span>
          <a-form-model-item label="停留时间" prop="holdTime">
            <a-input-number
              v-debounce="[setHoldTime,'input',1000]"
              :parser="(value) => (/^\d+$/.test(value) ? value : '')"
              :max="999"
              style="width: 40%"
              v-model="form.holdTime"
            />
            <span class="tip">单位：秒</span>
          </a-form-model-item>
          <span class="fonm_title">窗口位置和大小</span>
          <a-form-model-item label="起点x" prop="x">
            <a-input-number
              disabled
              v-debounce="[setX,'input',1000]"
              :parser="(value) => (/^\d+$/.test(value) ? value : '')"
              v-model="form.x"
            />
          </a-form-model-item>
          <a-form-model-item label="起点y" prop="y">
            <a-input-number
              disabled
              v-debounce="[setY,'input',1000]"
              :parser="(value) => (/^\d+$/.test(value) ? value : '')"
              v-model="form.y"
            />
          </a-form-model-item>
          <a-form-model-item label="宽度" prop="width">
            <a-input-number
              disabled
              v-debounce="[setWidth,'input',1000]"
              :parser="(value) => (/^\d+$/.test(value) ? value : '')"
              v-model="form.width"
            />
          </a-form-model-item>
          <a-form-model-item label="高度" prop="height">
            <a-input-number
              disabled
              v-debounce="[setHeight,'input',1000]"
              :parser="(value) => (/^\d+$/.test(value) ? value : '')"
              v-model="form.height"
            />
          </a-form-model-item>
        </div>
      </div>
    </a-form-model>
  </div> -->
  <div class="timeWindow">
    <div class="form1">
      <div>
        <span>窗口名称：</span>
        <a-input disabled style="width:140px" :maxLength="15" v-model="form.winName"></a-input>
      </div>
      <div class="margin-t-20">
        <span>时钟风格：</span>
        <a-select v-model="form.dateStyle" @change="setForm">
          <a-select-option value="0">2000-01-01 00:00:00</a-select-option>
          <a-select-option value="1">2000/01/01 00:00:00</a-select-option>
          <a-select-option value="2"
            >2000年01月01日 00时00分00秒</a-select-option
          >
        </a-select>
      </div>
      <div class="margin-t-20">
        <span style="width:99px">显示内容：</span>
        <a-row>
          <a-col :span="7">
            <a-checkbox @change="setForm" v-model="form.showYear">年</a-checkbox>
          </a-col>
          <a-col :span="7">
            <a-checkbox @change="setForm" v-model="form.showMonth">月</a-checkbox>
          </a-col>
          <a-col :span="7">
            <a-checkbox @change="setForm" v-model="form.showDay">日</a-checkbox>
          </a-col>
          <a-col :span="24">
            <a-checkbox @change="setForm" v-model="form.showWeek">星期</a-checkbox>
          </a-col>
          <a-col :span="7">
            <a-checkbox @change="setForm" v-model="form.showHour">时</a-checkbox>
          </a-col>
          <a-col :span="7">
            <a-checkbox @change="setForm" v-model="form.showMinute">分</a-checkbox>
          </a-col>
          <a-col :span="7">
            <a-checkbox @change="setForm" v-model="form.showSecond">秒</a-checkbox>
          </a-col>
        </a-row>
      </div>
      <div v-show="false">
        <span>起点x：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.x"
        />
      </div>
      <div v-show="false">
        <span>起点y：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.y"
        />
      </div>
      <div v-show="false">
        <span>宽度：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.width"
        />
      </div>
      <div v-show="false">
        <span>高度：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.height"
        />
      </div>
      
    </div>
    <div class="form2">
      <div class="rich_text">
        <div class="set">
          <a-space>
            <a-select 
              style="background-color:#fff;width:100px"
              v-model="form.fontName" 
              @change="setForm"
            >
              <a-select-option v-for="(item, index) in fontNameList" :key="index" :value="item">{{ item }}</a-select-option>
            </a-select>
            <a-input 
              type="color"
              style="width:60px"
              disabled 
              v-model="form.fontColor"
              ></a-input>
            <a-select 
              style="background-color:#fff;width:60px"
              v-model="form.fontSize" 
              @change="setForm"
            >
              <a-select-option v-for="(item, index) in fontSizeList" :key="index" :value="item">{{ item }}</a-select-option>
            </a-select>
            <div v-show="false">
              <span>行距：</span>
              <a-input-number 
                v-debounce="[setForm, 'input', 1000]" 
                style="width:40px"
                :parser="(value) => (/^\d+$/.test(value) ? value : '')" 
                v-model="form.lineSpace" />
            </div>
          </a-space>
          <div class="margin-t-20">
            <span>年格式：</span>
            <a-radio-group v-model="form.yearStyle" @change="setForm">
              <a-radio value="0">4位年</a-radio>
              <a-radio value="1">2位年</a-radio>
            </a-radio-group>
          </div>
          <div class="margin-t-20">
            <span>行格式：</span>
            <a-radio-group v-model="form.isMoreLine" @change="setForm">
              <a-radio :value="0">单行</a-radio>
              <a-radio :value="1">多行</a-radio>
            </a-radio-group>
          </div>
          <div class="margin-t-20">
            <span>停留时间：</span>
            <a-input-number
              v-debounce="[setForm, 'input', 300]"
              :parser="(value) => (/^\d+$/.test(value) ? value : '')"
              :max="60"
              style="width: 76px"
              v-model="form.holdTime"
            />
            <span class="tip red">单位：秒</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eqled from '@/const/eqLed.js';
export default {
  name:'timeWindowForm',
  data() {
    return {
      myScreen: {},
      form: {
        key:0,
        type:'3',
        winName:'',
        dateStyle: "0",
        yearStyle: '0',
        isMoreLine: 0,
        showYear: true,
        showMonth: true,
        showDay: true,
        showWeek: true,
        showHour: true,
        showMinute: true,
        showSecond: true,
        fontName: "宋体",
        fontSize: "12",
        fontColor: "#ff0000",
        alignX: "0",
        alignY: "0",
        isBold: false,
        isItalic: false,
        isUnderline: false,
        lineSpace: "0",
        // actionType: "1",
        // actionSpeed: "3",
        holdTime: 5,
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        fontCommon:{
        },
        actionCommon:{},
        areaCommon:{}
      },
      fontNameList: ['宋体'],
      fontSizeList: ["5","6","7","8","9","10","12","14","16","18",
        "20","24","28","32","36","44","52","60","76","92","124"],
      rules: {
        winName: [
          { required: true, message: "窗口名称不能为空", trigger: "blur" },
        ],
        lineSpace: [
          { required: true, message: "行距不能为空", trigger: "blur" },
        ],
      },
      maxWidth:0,
      maxHeight:0,
    };
  },
  props: {
    tabsKey:{
      type:Number,
      default:0
    },
    ledScreen: {
      type: Object,
      default: ()=>{},
    },
  },
  created () {
    this.myScreen = this.ledScreen;
    this.form.key = this.tabsKey;
  },
  computed: {

  },
  methods: {
    //创建时间窗对象
    createObj(self, formData, key, pageType, isNewCreate){
      this.form = Object.assign(this.form, formData);
      this.form.winName = `时间窗_${key}`;
      this.form.showFontSize = this.getShowFontSize(this.form.fontName, this.form.fontSize);
      if(pageType != 2 && isNewCreate){
        this.myScreen.createWindow(this.form, pageType, key, self);
      }
    },
    setForm(){
      this.form.showFontSize = this.getShowFontSize(this.form.fontName, this.form.fontSize);
      this.myScreen.setForm(this.form);
    },
    //获取预览显示字号
    getShowFontSize(fontName, fontSize){
      let showFontSize = '';
      if(fontName == '宋体'){
        showFontSize = eqled.songfontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '楷体'){
        showFontSize = eqled.kaifontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '黑体'){
        showFontSize = eqled.heifontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '微软雅黑'){
        showFontSize = eqled.yaheifontSizeMap[fontSize]['fontSize'];
      }
      return showFontSize;
    },
    //整理为要发送的格式
    sort(_item){
      let obj = {
        content:{}
      };
      obj.winName = _item.winName;
      obj.type = _item.type;
      obj.key = _item.key;
      let fontCommon = [
        'fontName','fontSize','fontColor','alignX','alignY',
        'isBold','isItalic','isUnderline','lineSpace'
      ];
      fontCommon.forEach(item => {
        _item['fontCommon'][item] = _item[item];
      })
      let actionCommon = ['holdTime'];
      actionCommon.forEach(item => {
        _item['actionCommon'][item] = _item[item];
      })
      let areaCommon = [
        'x','y','width','height'
      ];
      areaCommon.forEach(item => {
        _item['areaCommon'][item] = _item[item];
      })
      let content = [
        'dateStyle','showYear','showMonth','showDay','showWeek',
        'showHour','showMinute','showSecond','yearStyle',
        'isMoreLine','fontCommon','actionCommon','areaCommon'
      ];
      content.forEach(item => {
        obj.content[item] = _item[item];
      })
      // obj.content.fontCommon.fontColor = 255;
      obj.content = JSON.stringify(obj.content);
      return obj;
    },
  },
  mounted () {
  },
};
</script>

<style lang="less" scoped>
.timeWindow{
  display: flex;
  color: #999;
  font-size: 13px;
  .form1{
    width: 320px;
    height: 225px;
    border: 1px solid #eee;
    border-top: none;
    padding: 16px;
    /deep/ .ant-select-selection{padding-left: 0;}
    /deep/ .ant-checkbox-wrapper{ font-size: 13px;}
    &>div{
      display: flex;
      align-items: center;
    }
  }
  .form2{
    width: 440px;
    height: 225px;
    border-bottom: 1px solid #eee;
    padding: 10px;
    .rich_text{
      border: 1px solid #ddd;
      width: 100%;
      height: 100%;
      .set{
        width: 100%;
        height: 44px;
        padding: 6px 12px;
        margin: 0 auto;
        background-color: #f9f9f9;
        background: linear-gradient(to bottom,  #d9d9d9 0%,#f7f7f7 100%);
        /deep/ .ant-select-selection{padding-left: 0;}
        /deep/ .ant-select-selection--single .ant-select-selection__rendered{margin-right: 8px;}
      }
      .content{
        width: 100%;
        height: 160px;
        background-color: #333;
      }
    }
  }
}
.fonm_title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.tip {
  font-size: 12px;
  margin-left: 6px;
}
.tip::before {
  content: "* ";
  color: #ff0000;
}
/deep/ .ant-input-number-handler-wrap{
    display:none;
}
</style>
